<template>
  <view class="viewport">
    <view class="header" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
      <view class="left icon-left" @tap="Onleft()"></view>
      <uni-title type="h1" align="center" title="存钱打卡" class="text"></uni-title>
      <view class="btn1 right" @tap="Add">配置计划</view>
    </view>
    <!-- 统计 -->
    <view class="count">
      <uni-title type="h4" align="left" :title="planTotalAmount" class="text"></uni-title>
      <uni-title type="h4" align="left" :title="realTotalAmount" class="text"></uni-title>
      <uni-title type="h4" align="left" :title="needTotalAmount" class="text"></uni-title>
    </view>
    <!-- 具体明细 -->
    <scroll-view enable-back-to-top scroll-y class="scroll">
      <view class="content">
        <view
          class="cell"
          :class="{ active: item.Status === 1 }"
          v-for="item in data"
          :key="item.ID"
          @tap="openPopup(item.ID)"
        >
          <view>{{ item.Status == 1 ? '已存入' : '待存入' }}</view>
          <view>{{ item.Status == 1 ? '¥' + item.RealAmount : '¥' + item.PlanAmount }}</view>
          <view>{{ item.SaveYear }}-{{ item.SaveMonth }}</view>
        </view>
      </view>
    </scroll-view>
    <!-- 普通弹窗 -->
    <uni-popup
      ref="popup"
      type="bottom"
      borderRadius="20rpx"
      background-color="#fafafa"
      @close="popup?.close()"
    >
      <view class="popup-content popup">
        <view class="pheader">
          <text class="title">{{ editItem?.SaveYear }}-{{ editItem?.SaveMonth }}</text>
          <text class="btn del" @tap="SaveMoney()">存 入</text>
          <text class="btn del" @tap="CancelSaveMoney()">取消存入</text>
        </view>
        <view class="content">
          <view>计划存入：{{ editItem?.PlanAmount }}</view>
          <view class="item">
            <view>本次存入：</view>
            <view class="input">
              <input
                class="uni-input"
                placeholder="点击填写备注"
                v-model="editItem.RealAmount" /></view
          ></view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import {
  CancelSaveMoneyAPI,
  GetSaveMoneyAPI,
  NoteAccountJobAPI,
  SaveMoneyAPI,
} from '@/services/job'
import { useMemberStore } from '@/stores'
import type { GetSaveMoneyResponse } from '@/types/job'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import Usergroup from '../NoteAcount/usergroup.vue'
const route = useRoute()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 获取会员信息
const memberStore = useMemberStore()
const data = ref<GetSaveMoneyResponse[]>()
const editItem = ref<GetSaveMoneyResponse>({
  ID: 0,
  RealTotalAmount: 0,
  PlanTotalAmount: 0,
  PlanAmount: 0,
  RealAmount: 0,
  Status: 0,
  SaveYear: 0,
  SaveMonth: 0,
  NeedTotalAmount: 0,
  NeedTotalAmountAvg: 0,
})
const planTotalAmount = ref<string>()
const realTotalAmount = ref<string>()
const needTotalAmount = ref<string>()
//加载初始化
onLoad(async () => {
  reFresh()
})
onShow(async () => {
  reFresh()
})
//刷新事件
const reFresh = async () => {
  if (memberStore.profile) {
    const res = await GetSaveMoneyAPI({
      Auth: memberStore.profile.Token,
      UserGroup: memberStore.profile.UserGroup,
    })
    data.value = res.result
    planTotalAmount.value = '目标：' + data.value[0].PlanTotalAmount
    realTotalAmount.value = '已存入：' + data.value[0].RealTotalAmount
    needTotalAmount.value =
      '剩余：' + data.value[0].NeedTotalAmount + ' (平均：' + data.value[0].NeedTotalAmountAvg + ')'
    uni.showToast({ icon: 'success', title: '刷新成功' })
  } else {
    uni.showToast({ icon: 'none', title: '请先登录' })
    setTimeout(() => {
      // 页面跳转
      uni.switchTab({ url: '/pages/my/my' })
    }, 500)
  }
}
//返回
const Onleft = () => {
  uni.switchTab({ url: '/pages/my/my' })
}
//弹出层
// uni-ui 弹出层组件
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
const openPopup = async (id: number) => {
  popup.value?.open()
  const res = data.value!.find((o) => o.ID == id)
  editItem.value = res!
  if (editItem.value.Status == 0) {
    editItem.value.RealAmount = editItem.value.PlanAmount
  }
}
//取消存入
const CancelSaveMoney = async () => {
  if (memberStore.profile) {
    await CancelSaveMoneyAPI({
      Auth: memberStore.profile.Token,
      ID: editItem.value.ID,
    })
    popup.value?.close()
    reFresh()
  }
}
//存入
const SaveMoney = async () => {
  if (memberStore.profile) {
    await SaveMoneyAPI({
      Auth: memberStore.profile.Token,
      ID: editItem.value.ID,
      Amount: editItem.value.RealAmount,
    })
    popup.value?.close()
    reFresh()
  }
}
const Add = () => {
  var now = new Date()
  uni.navigateTo({ url: '/pages/plan/savemoneyAdd?SaveYear=' + now.getFullYear() })
}
</script>

<style lang="scss">
@import './styles/savemoney.scss';
</style>
